<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import request from "@/util/request.js";

export default {
  data() {
    return {
      xAxisOption: {
        type: 'category',
        axisTick: {show: false},
        data: []
      },
      yAxisOption: {
        type: 'value'
      },
      seriesOption: [
        {
          name: '提交次数',
          type: 'bar',
          barGap: 0,
          label: null, // labelOption 将在 option 中指定
          emphasis: {
            focus: 'series'
          },
          data: []
        },
        {
          name: '新增行数',
          type: 'bar',
          label: null, // labelOption 将在 option 中指定
          emphasis: {
            focus: 'series'
          },
          data: []
        },
        {
          name: '删除行数',
          type: 'bar',
          label: null, // labelOption 将在 option 中指定
          emphasis: {
            focus: 'series'
          },
          data: []
        }
      ],
      labelOption: {
        show: true,
        position: 'insideBottom',
        distance: 15,
        align: 'left',
        verticalAlign: 'middle',
        rotate: 90,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {color: '#fff',}
        }
      },
    };
  },
  mounted() {
    this.getData();

  },
  methods: {
    getData(){
      request.get("/contributors/getAllData").then(res=>{
        this.xAxisOption.data=res.data.data[0]
        this.seriesOption[0].data=res.data.data[1]
        this.seriesOption[1].data=res.data.data[2]
        this.seriesOption[2].data=res.data.data[3]
        this.initChart();
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption(this.option);
    },
    updateChart() {
      const labelOption = {
        rotate: this.config.rotate,
        align: this.config.align,
        verticalAlign: this.config.verticalAlign,
        position: this.config.position,
        distance: this.config.distance
      };
      this.chart.setOption({
        series: this.option.series.map(() => ({label: labelOption}))
      });
    }
  },
  computed: {
    option() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['提交次数', '新增行数', '删除行数']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: [this.xAxisOption],
        yAxis: [this.yAxisOption],
        series: this.seriesOption.map(series => {
          return {...series, label: this.labelOption};
        })
      };
    }
  }
};

</script>

<style>
.chart-container {
  width: 60vw;
  height: 40vw;
}

.chart {
  width: 100%;
  height: 100%;
}
@media (max-width: 1500px) {
  .chart-container {
    width: 90vw;
    height: 80vw;
  }
}
</style>
